<template>
    <Card>
        <Row slot="title" style="text-align: left">
            <div style="display: inline;cursor: pointer" @click="returnLastPage" span="2">
                <Icon type="chevron-left"></Icon>
                返回
            </div>
            <!--<Icon type="clipboard"></Icon>-->
            <!--<span>生产操作规范</span>-->
            <Button type="primary" style="margin-left: 10px" size="small" @click="add">添加</Button>
        </Row>
        <Table border :columns="columns" :data="data"></Table>

        <Modal
                v-model="isShowDialog"
                title="生产操作规范"
                @on-ok="modalOk"
                @on-cancel="modalCancel"
                :mask-closable="false">

            <Form v-model="FormInfo">
                <FormItem label="物候期" :label-width="50">
                    <Input v-model="FormInfo.phenological" placeholder="请输入物候期"/>
                    <Row style="margin-top: 10px">
                        <Col span="11">
                        <Cascader placeholder="请选择起始时间" size="small" :render-format="cascaderFormat"
                                  v-model="FormInfo.phenologicalStartTime" :data="this.phenologicalTimeDatas">
                        </Cascader>
                        </Col>
                        <Col span="2" style="text-align: center">
                        ～</Col>
                        <Col span="11">
                        <Cascader placeholder="请选择结束时间" size="small" :render-format="cascaderFormat"
                                  v-model="FormInfo.phenologicalEndTime" :data="this.phenologicalTimeDatas">
                        </Cascader>
                        </Col>
                    </Row>
                </FormItem>
                <!--<FormItem label="灌溉次数">-->
                <!--<InputNumber :min="0"  v-model="FormInfo.numOfIrrigationMin"></InputNumber>-->
                <!--～-->
                <!--<InputNumber :min="FormInfo.numOfIrrigationMin" v-model="FormInfo.numOfIrrigationMax"></InputNumber>-->
                <!--</FormItem>-->
                <Card style="margin-bottom: 10px">
                    <p slot="title" style="font-size: 16px">灌水:</p>
                    <p>灌水次数范围: <span style="font-weight: 500;color:#ff2222">{{getNumOfIrrigation(1)}}</span></p>
                    <Slider show-tip="never" :tip-format="irrigationFormat" style="margin: 0 20px" :min='0' :max='10'
                            v-model="FormInfo.numOfIrrigationValue" range></Slider>
                    <p>灌溉量范围: <span style="font-weight: 500;color:#ff2222">{{getNumOfIrrigation(2)}}</span></p>
                    <Slider show-tip="never" style="margin: 0 20px" :min='0' :max='10'
                            v-model="FormInfo.irrigationVolumeValue" range></Slider>
                </Card>
                <Card>
                    <p slot='title' style="font-size: 16px">滴肥:</p>
                    <p>滴肥次数范围: <span style="font-weight: 500;color:#ff2222">{{getNumOfIrrigation(3)}}</span></p>
                    <Slider show-tip="never" style="margin: 0 20px" :min='0' :max='10'
                            v-model="FormInfo.numOfDropFertValue" range></Slider>
                    <p>每次施肥量范围:</p>
                    <div style="padding-left: 10px;padding-top: 10px">
                        <p>尿素: <span style="font-weight: 500;color:#ff2222">{{getNumOfIrrigation(4)}}</span></p>
                        <Slider show-tip="never" style="margin: 0 20px" :min='0' :max='15'
                                v-model="FormInfo.ureaValue" range></Slider>
                        <p>一铵: <span style="font-weight: 500;color:#ff2222">{{getNumOfIrrigation(5)}}</span></p>
                        <Slider show-tip="never" style="margin: 0 20px" :min='0' :max='15'
                                v-model="FormInfo.ammoniumValue" range></Slider>
                        <p>单质硫酸钾: <span style="font-weight: 500;color:#ff2222">{{getNumOfIrrigation(6)}}</span></p>
                        <Slider show-tip="never" style="margin: 0 20px" :min='0' :max='15'
                                v-model="FormInfo.K2SO4Value" range></Slider>
                    </div>
                </Card>
            </Form>
        </Modal>

    </Card>
</template>

<style scoped>


</style>

<script>

    export default {
        data() {
            return {
                isShowDialog: false,
                choseRowData: {},//选中的rowData
                choseRowIndex: -1,//选中的位置
                modalType: 'add',//modal类型 默认是添加状态  edit 是编辑状态
                phenologicalTimeDatas: [
                    {
                        value: '1月',
                        label: '1月',
                        children: [
                            {
                                value: '上旬',
                                label: '上旬'
                            },
                            {
                                value: '中旬',
                                label: '中旬'
                            },
                            {
                                value: '下旬',
                                label: '下旬'
                            }
                        ]
                    },
                    {
                        value: '2月',
                        label: '2月',
                        children: [
                            {
                                value: '上旬',
                                label: '上旬'
                            },
                            {
                                value: '中旬',
                                label: '中旬'
                            },
                            {
                                value: '下旬',
                                label: '下旬'
                            }
                        ]
                    },
                    {
                        value: '3月',
                        label: '3月',
                        children: [
                            {
                                value: '上旬',
                                label: '上旬'
                            },
                            {
                                value: '中旬',
                                label: '中旬'
                            },
                            {
                                value: '下旬',
                                label: '下旬'
                            }
                        ]
                    },
                    {
                        value: '4月',
                        label: '4月',
                        children: [
                            {
                                value: '上旬',
                                label: '上旬'
                            },
                            {
                                value: '中旬',
                                label: '中旬'
                            },
                            {
                                value: '下旬',
                                label: '下旬'
                            }
                        ]
                    },
                    {
                        value: '5月',
                        label: '5月',
                        children: [
                            {
                                value: '上旬',
                                label: '上旬'
                            },
                            {
                                value: '中旬',
                                label: '中旬'
                            },
                            {
                                value: '下旬',
                                label: '下旬'
                            }
                        ]
                    },
                    {
                        value: '6月',
                        label: '6月',
                        children: [
                            {
                                value: '上旬',
                                label: '上旬'
                            },
                            {
                                value: '中旬',
                                label: '中旬'
                            },
                            {
                                value: '下旬',
                                label: '下旬'
                            }
                        ]
                    },
                    {
                        value: '7月',
                        label: '7月',
                        children: [
                            {
                                value: '上旬',
                                label: '上旬'
                            },
                            {
                                value: '中旬',
                                label: '中旬'
                            },
                            {
                                value: '下旬',
                                label: '下旬'
                            }
                        ]
                    },
                    {
                        value: '8月',
                        label: '8月',
                        children: [
                            {
                                value: '上旬',
                                label: '上旬'
                            },
                            {
                                value: '中旬',
                                label: '中旬'
                            },
                            {
                                value: '下旬',
                                label: '下旬'
                            }
                        ]
                    },
                    {
                        value: '9月',
                        label: '9月',
                        children: [
                            {
                                value: '上旬',
                                label: '上旬'
                            },
                            {
                                value: '中旬',
                                label: '中旬'
                            },
                            {
                                value: '下旬',
                                label: '下旬'
                            }
                        ]
                    },
                    {
                        value: '10月',
                        label: '10月',
                        children: [
                            {
                                value: '上旬',
                                label: '上旬'
                            },
                            {
                                value: '中旬',
                                label: '中旬'
                            },
                            {
                                value: '下旬',
                                label: '下旬'
                            }
                        ]
                    },
                    {
                        value: '11月',
                        label: '11月',
                        children: [
                            {
                                value: '上旬',
                                label: '上旬'
                            },
                            {
                                value: '中旬',
                                label: '中旬'
                            },
                            {
                                value: '下旬',
                                label: '下旬'
                            }
                        ]
                    }, {
                        value: '12月',
                        label: '12月',
                        children: [
                            {
                                value: '上旬',
                                label: '上旬'
                            },
                            {
                                value: '中旬',
                                label: '中旬'
                            },
                            {
                                value: '下旬',
                                label: '下旬'
                            }
                        ]
                    }
                ],//物候期时间选择data
                FormInfo: {
                    phenological: '',//物候期
                    phenologicalStartTime: [],//物候期起始时间
                    phenologicalEndTime: [],//物候期结束时间
                    numOfIrrigationValue: [],//灌水次数范围
                    irrigationVolumeValue: [],//灌溉量范围
                    numOfDropFertValue: [],//滴肥次数范围
                    ureaValue: [],//尿素施肥量范围范围
                    ammoniumValue: [],//一铵施肥范围
                    K2SO4Value: [],//硫酸钾施肥范围
                },
                columns: [
                    {
                        title: '物候期',
                        key: 'phenological',
                        align: 'center',
                        width: 150,
                    },
                    {
                        title: '起始时间～结束时间',
                        key: 'startToEnd',
                        align: 'center',
                        width: 180,
                    },
                    {
                        title: '灌水次数',
                        align: 'center',
                        width: 150,
                        key: 'numOfIrrigation'
                    },
                    {
                        title: '灌溉量 m³/亩',
                        align: 'center',
                        width: 150,
                        key: 'irrigationVolume'
                    },
                    {
                        title: '滴肥次数',
                        align: 'center',
                        width: 150,
                        key: 'numOfDropFert'
                    },
                    {
                        title: '尿素（kg/亩次)',
                        align: 'center',
                        width: 150,
                        key: 'urea',
                    },
                    {
                        title: '一铵（kg/亩次)',
                        align: 'center',
                        width: 150,
                        key: 'ammonium',
                    },
                    {
                        title: '单质硫酸钾（kg/亩次)',
                        align: 'center',
                        key: 'K2SO4',
                        width: 180
                    },
                    {
                        title: '操作',
                        key: 'options',
                        align: 'center',
                        fixed: 'right',
                        width: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            //编辑
                                            this.edit(params);
                                        }
                                    }

                                }, '编辑'),
                                h('Poptip', {
                                    props: {
                                        confirm: true,
                                        title: "您确认删除这条内容吗？",
                                        transfer: true,
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.delete(params)
                                        }
                                    }
                                }, [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small',
                                        },
                                    }, "删除")
                                ])
                            ])
                        }
                    }

                ],
                data: [
                    {
                        //todo 为了方便编辑时解析物候期的数据，这里加一个对象 存储原始数据
                        originData: {
                            phenological: '春梢生长期',//物候期
                            phenologicalStartTime: ["4月", "下旬"],//物候期起始时间
                            phenologicalEndTime: ["5月", "上旬"],//物候期结束时间
                            numOfIrrigationValue: [4, 5],//灌水次数范围
                            irrigationVolumeValue: [5,8 ],//灌溉量范围
                            numOfDropFertValue: [1, 4],//滴肥次数范围
                            ureaValue: [12, 14],//尿素施肥量范围范围
                            ammoniumValue: [4, 6],//一铵施肥范围
                            K2SO4Value: [0, 5],//硫酸钾施肥范围
                        },
                        phenological: '春梢生长期',
                        startToEnd: ' 4月下旬～5月上旬',
                        numOfIrrigation: '4~5',
                        irrigationVolume: '20~25',
                        numOfDropFert: '1～4',
                        urea: '12~14',
                        ammonium: '4~6',
                        K2SO4: '0'
                    }
                ],
            }
        },
        methods: {
            add: function () {
                this.modalType = 'add';
                this.isShowDialog = true;
            },
            edit: function (params) {
                this.choseRowIndex = params.index;
                this.modalType = 'edit';
                this.choseRowData = this.data[params.index];
                //赋值
                this.FormInfo.phenological = this.choseRowData.originData.phenological;//物候期
                this.FormInfo.phenologicalStartTime = this.choseRowData.originData.phenologicalStartTime;//物候期起始时间
                this.FormInfo.phenologicalEndTime = this.choseRowData.originData.phenologicalEndTime;//物候期结束时间
                this.FormInfo.numOfIrrigationValue = this.choseRowData.originData.numOfIrrigationValue;//灌水次数范围
                this.FormInfo.irrigationVolumeValue = this.choseRowData.originData.irrigationVolumeValue;//灌溉量范围
                this.FormInfo.numOfDropFertValue = this.choseRowData.originData.numOfDropFertValue;//滴肥次数范围
                this.FormInfo.ureaValue = this.choseRowData.originData.ureaValue;//尿素施肥量范围范围
                this.FormInfo.ammoniumValue = this.choseRowData.originData.ammoniumValue;//一铵施肥范围
                this.FormInfo.K2SO4Value = this.choseRowData.originData.K2SO4Value;//硫酸钾施肥范围

                this.isShowDialog = true;
            },
            delete: function (params) {
                //todo 网络请求 删除记录
                this.data.splice(params.index, 1);
            },
            formatArray: function (arr) {
                return arr[0] + "" + arr[1];
            },
            modalOk: function () {
//                console.log("级联选择器", this.FormInfo.phenologicalStartTime)
                let addData = {
                    originData: {
                        phenological: this.FormInfo.phenological,//物候期
                        phenologicalStartTime: this.FormInfo.phenologicalStartTime,//物候期起始时间
                        phenologicalEndTime: this.FormInfo.phenologicalEndTime,//物候期结束时间
                        numOfIrrigationValue: this.FormInfo.numOfIrrigationValue,//灌水次数范围
                        irrigationVolumeValue: this.FormInfo.irrigationVolumeValue,//灌溉量范围
                        numOfDropFertValue: this.FormInfo.numOfDropFertValue,//滴肥次数范围
                        ureaValue: this.FormInfo.ureaValue,//尿素施肥量范围范围
                        ammoniumValue: this.FormInfo.ammoniumValue,//一铵施肥范围
                        K2SO4Value: this.FormInfo.K2SO4Value,//硫酸钾施肥范围
                    },
                    phenological: this.FormInfo.phenological,
                    startToEnd: this.formatArray(this.FormInfo.phenologicalStartTime) + " ～ " + this.formatArray(this.FormInfo.phenologicalEndTime),
                    numOfIrrigation: this.FormInfo.numOfIrrigationValue[0] + '～' + this.FormInfo.numOfIrrigationValue[1],
                    irrigationVolume: this.FormInfo.irrigationVolumeValue[0] + '～' + this.FormInfo.irrigationVolumeValue[1],
                    numOfDropFert: this.FormInfo.numOfDropFertValue[0] + '～' + this.FormInfo.numOfDropFertValue[1],
                    urea: this.FormInfo.ureaValue[0] + '～' + this.FormInfo.ureaValue[1],
                    ammonium: this.FormInfo.ammoniumValue[0] + '～' + this.FormInfo.ammoniumValue[1],
                    K2SO4: this.FormInfo.K2SO4Value[0] + '～' + this.FormInfo.K2SO4Value[1]
                }
                if (this.modalType == 'add') {
                    this.data.push(addData);
                } else {
                    this.$set(this.data, this.choseRowIndex, addData);
                }
                //清空
                this.modalCancel();
            },
            modalCancel: function () {
                //重置一波数据
                this.FormInfo.phenological = '';//物候期
                this.FormInfo.phenologicalStartTime = [];//物候期起始时间
                this.FormInfo.phenologicalEndTime = [];//物候期结束时间
                this.FormInfo.numOfIrrigationValue = [0, 10];//灌水次数范围
                this.FormInfo.irrigationVolumeValue = [0, 10];//灌溉量范围
                this.FormInfo.numOfDropFertValue = [0, 10];//滴肥次数范围
                this.FormInfo.ureaValue = [0, 15];//尿素施肥量范围范围
                this.FormInfo.ammoniumValue = [0, 15];//一铵施肥范围
                this.FormInfo.K2SO4Value = [0, 15];//硫酸钾施肥范围
            },
            //级联选择器格式
            cascaderFormat: function (label) {
                return label.join(' ')
            },
            //灌水次数 silder 提示样式
            irrigationFormat: function (val) {
                return val + "次";
            },
            //获取灌溉次数
            getNumOfIrrigation: function (type) {
                var str;
                switch (type) {
                    case 1:
                        //灌溉次数
                        str = this.FormInfo.numOfIrrigationValue[0] + " ～ " + this.FormInfo.numOfIrrigationValue[1] + "次";
                        break;
                    case 2:
                        //灌溉量
                        str = this.FormInfo.irrigationVolumeValue[0] + " ～ " + this.FormInfo.irrigationVolumeValue[1] + " m³/亩";
                        break;
                    case 3:
                        str = this.FormInfo.numOfDropFertValue[0] + " ～ " + this.FormInfo.numOfDropFertValue[1] + " 次";
                        break;
                    case 4:
                        str = this.FormInfo.ureaValue[0] + " ～ " + this.FormInfo.ureaValue[1] + " kg/亩次";
                        break;
                    case 5:
                        str = this.FormInfo.ammoniumValue[0] + " ～ " + this.FormInfo.ammoniumValue[1] + " kg/亩次";
                        break;
                    case 6:
                        str = this.FormInfo.K2SO4Value[0] + " ～ " + this.FormInfo.K2SO4Value[1] + " kg/亩次";
                        break;
                }
                return str;
            },

            returnLastPage: function () {
                window.history.go(-1)
            }
        }
    }

</script>